<template>
  <div>
    <van-nav-bar
      title="车位状态"
      right-text="退出"
      @click="onClickRight"
      :fixed="true"
    />
    <van-search v-model="valuee" placeholder="请输入要查询的泊位编号" />
    <span
      style="font-size=8px;position:absolute;top:76px;left:320px"
      @click="find"
      >搜索</span
    >

    <table
      style="
        font-size: 12px;
        border: 1px solid #333;
        border-collapse: collapse;
        margin-left: 16px;
      "
      id="liebiao"
      CELLPADDING="5"
      CELLSPACING="5"
    >
      <tr>
        <td style="border-bottom: 1px solid #333">&nbsp;泊位号</td>
        <td style="border-bottom: 1px solid #333; padding-left: 70px">状态</td>
        <td style="border-bottom: 1px solid #333; padding-left: 120px">
          泊位操作&nbsp;&nbsp;&nbsp;
        </td>
      </tr>
      <tr>
        &nbsp;
      </tr>
      <tr
        v-for="(item, index) in xin"
        :key="index"
        @click="findorder(item.name)"
      >
        <th>&nbsp;{{ item.name }}</th>
        <th style="padding-left: 70px">{{ item.remark }}</th>
        <th style="padding-left: 120px">
          <van-button size="mini" color="#7232dd" plain>查看详情</van-button>
        </th>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  // el: ".leibiao",
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
      xin: [
        {
          name: "A001",
          remark: "正常",
        },
      ],
      valuee: "",
    };
  },

  // 根据名称查询泊位状态
  created: function () {
    this.$axios({
      url: "/allberths",
      method: "get",
      params: { pid: localStorage.getItem("sectionid") },
    })
      .then((res) => {
        if (res.data.msg == 200) {
          this.xin = res.data.data;
        }
      })
      .catch((error) => {
        alert("出错了");
      });
  },

  methods: {
    //预留退出
    onClickRight() {
      this.$router.push('/')
      localStorage.clear
    },

    //查所有泊位信息
    find: function () {
      this.$axios({
        url: "/findbyberthname",
        method: "get",
        params: {
          name: this.valuee,
          sectionsId: localStorage.getItem("sectionid"),
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.xin = res.data.data;
          }
        })
        .catch((error) => {
          alert("出错了");
        });
    },

    //获取订单详情
    findorder: function (n) {
      this.$axios({
        url: "/findAllBySectionIdAndBerthName",
        method: "get",
        params: { name: n,roadSectionId: localStorage.getItem("sectionid")},
      })
        .then((res) => {
          if (res.data.code == 200) {
            var boid = res.data.data.berthId;
            localStorage.setItem("boid", boid);
            this.$router.push({ path: "/orders" });
          }
        })
        .catch((error) => {
          alert("订单不存在");
        });
    },
  },
};
</script>
<style>
</style>


